<template>
    <div>
        <h2 style="padding-bottom: 15px;">{{data.subjectName}}</h2>
        <div style="text-align: left; margin-left: 50px; padding-bottom: 10px; margin-top: -30px;">
            <el-button type="text" @click="$router.push('/wrongBook/index')" class="back">返回上一级</el-button>
        </div>
        <hr>
        <div class="box-card" v-for="(item,index) in data.wrongs" :key="index" >
                <div class="question" v-if="item.questionType == 1">
                    <p class="ques-type">题型:单选题</p>
                    <p class="p-text"> {{ index+1 }}、{{ item.questionName}}</p>
                    <div style="width: 100%;">
                        <el-radio-group v-model="item.answer" style="width: 100%;">
                            <p class="p-text">
                                <el-radio label="A" >A、{{item.answerA}}</el-radio>
                            </p>
                            <p class="p-text">
                                <el-radio label="B" >B、{{item.answerB}}</el-radio>
                            </p>
                            <p class="p-text">
                                <el-radio label="C" >C、{{item.answerC}}</el-radio>
                            </p>
                            <p class="p-text">
                                <el-radio label="D" >D、{{item.answerD}}</el-radio>
                            </p>
                        </el-radio-group>
                    </div>
                </div>
                <div class="question" v-if="item.questionType == 2">
                    <p class="ques-type">题型:多选题</p>
                    <p class="p-text"> {{ index+1 }}、{{ item.questionName}}</p>
                    <div style="width: 100%;">
                        <el-checkbox-group :value="getCheckList(item.answer)" style="width: 100%;">
                            <p class="p-text">
                                <el-checkbox label="A" >A、{{item.answerA}}</el-checkbox>
                            </p>
                            <p class="p-text">
                                <el-checkbox label="B" >B、{{item.answerB}}</el-checkbox>
                            </p>
                            <p class="p-text">
                                <el-checkbox label="C" >C、{{item.answerC}}</el-checkbox>
                            </p>
                            <p class="p-text">
                                <el-checkbox label="D" >D、{{item.answerD}}</el-checkbox>
                            </p>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="question" v-if="item.questionType == 3">
                    <p class="ques-type">题型:判断题</p>
                    <p class="p-text"> {{ index+1 }}、{{ item.questionName}}</p>
                    <div style="width: 100%;">
                        <el-radio-group v-model="item.answer" style="width: 100%;">
                            <p class="p-text">
                                <el-radio label="是" >A、正确</el-radio>
                            </p>
                            <p class="p-text">
                                <el-radio label="否" >B、错误</el-radio>
                            </p>
                        </el-radio-group>
                    </div>
                </div>
                <div class="question" v-if="item.questionType == 4">
                    <p class="ques-type">题型:简答题</p>
                    <p class="p-text"> {{ index+1 }}、{{ item.questionName}}</p>
                    <p class="p-text">{{ item.answer}}</p>
                </div>
                <div class="answer">
                    <p class="p-text">标准答案：{{ item.correctAnswer}}</p>
                    <p class="p-text">分数：{{ item.questionScore}}</p>
                    <p class="p-text">难度：<el-rate v-model="item.difficulty" style="display: inline-block;" ></el-rate></p>
                    <p class="p-text">解析：{{ item.questionDesc}}</p>
                </div>
                <div class="option">
                    <el-button slot="reference" type="info" class="btn" @click="removeWrong(item.id)">移除</el-button>
                </div>
        </div>
        <div class="page">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="queryForm.pageIndex"
                    layout="prev, pager, next"
                    :total="total">
                </el-pagination>
        </div>
    </div>
</template>

<script>
import { wrongItems ,removeWrong} from '@/api/wrong/wrong';
export default {
    name:'WrongRead',
    data(){
        return{
            queryForm:{
                pageIndex:1,
                pageSize:12,
                subjectId:0
            },
            data:{
                subjectName:'高等数学',
                wrongs:[]
            },
            total:0
        }
    },
    mounted(){
        let id = this.$route.query.id;
        if(id &&  parseInt(id) != 0){
            this.queryForm.subjectId = id;
            console.log(this.queryForm.subjectId+"====>subjectId");
            this.search();

        }else{
            this.$router.push(`/wrong/index?redirect=${new Date().getTime}`)
        }
    },
    methods:{
        async search(){
            let res = await wrongItems(this.queryForm);
            this.data = res.data;
            this.total = this.data.wrongs.length;
        },
        removeWrong(id){
            removeWrong(id).then(resp =>{
                    this.$notify({
                    message: '移除成功',
                    type: 'success',
                    duration:1500
                });
            }).catch(error =>{

            }).finally(()=>{
                this.search();
            })

        },
        getCheckList(val){
            return val.split(',');
        },
        handleCurrentChange(val){
            this.queryForm.pageIndex = val;
        }
    },
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
    }
    h2{
        margin: 10px 0px 10px 0px;
    }
    .page{
        width: 80%;
        background: white;
        margin: -10px auto 0px;
    }
    .p-text{
        text-align: left;
        font-family: '宋体';
        margin: 10px 0px 5px 15px;
    }
    .box-card{
        border-top: 30px solid rgb(240, 108, 108);
        margin: 10px auto ;
        background: rgb(255, 255, 255);
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        width: 80%;
    }
    .ques-type{
        text-align: left;
        margin-top: -24px;
        margin-left: 20px;
        font-family: '隶书';
    }
    .btn{
        width: 55px;
        height: 30px;
        position: relative;
        left: 40%;
        bottom: 10px;
    }
    .back{
        width: 40px;
        height: 25px;
        margin-top: -18px;
        position: fixed;
        color: rgb(23, 23, 14);
    }

</style>